import React, { useEffect, useRef, useState } from 'react';
import { queryFunVideoList } from './service';
import ProTable, { ActionType } from '@ant-design/pro-table';
import { Card, Descriptions } from 'antd';

const TableList: React.FC<{}> = (props: any) => {
  const { activityId, itemId,stepId } = props.params;
  const { uid } = props
  const actionRef = useRef<ActionType>();
  const [info,setInfo] = useState<any>({})
  const columns: any= [

    {
      title: '用户ID',
      dataIndex: 'uid',
      hideInSearch: true
    },
    {
      title:'用户昵称',
      dataIndex:'nickname',
      hideInSearch: true
    },
    {
      title:'真实姓名',
      dataIndex:'name',
      hideInSearch: true
    },
    {
      title:'手机号',
      dataIndex:'mobile',
      hideInSearch: true
    },
    {
      title:'班级',
      dataIndex:'className',
      hideInSearch: true
    },
    {
      title:'辅导老师',
      dataIndex:'assistTeacherName',
      hideInSearch: true
    },
    {
      title:info.sourceName,
      dataIndex:'checkPointName',
      hideInSearch: true
    },

  ]
  useEffect(()=>{
    actionRef.current?.reload()
  },[uid,stepId])
  return (
      <ProTable<any>
        rowKey="id"
        search={
          false
        }
        actionRef={actionRef}
        tableExtraRender={()=>(
          <Card>
            <Descriptions size="small" column={2}>
            <Descriptions.Item label="条目ID">{info.itemId}</Descriptions.Item>
            <Descriptions.Item label="条目名称">{info.name}</Descriptions.Item>
            <Descriptions.Item label="条目开始时间">{info.startTime}</Descriptions.Item>
          </Descriptions>
          </Card>
        )}
        request={async (params: any) => {
          const res = await queryFunVideoList({
            ...params,
            pageNum: params.current,
            activityId,
            itemId,
            searchParam:uid,
            stepId
          });
          setInfo(res.data)
          return {
            data: res.data.userList,
            success: true,
            total: res.data.count,
          };
        }}
        columns={columns}
      />
  );
};

export default TableList;
